.btn-indra:hover, .btn-indra:focus, .btn-indra-small:hover, .btn-indra-small:focus {
    outline: none;
}

.control-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4em;
    padding: 0 6vw 0.5em 6vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* justify-content: space-around; */
}

.control-item {
    min-width: 4em;
    text-align: center;
    transition: all 400;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.9);
    background: none;
    padding: 1em 0.5em 0.25em 0.5em;
}

.control-item-button {
    outline: none;
    /* float: right; */
    /* margin: 0 1em 0 0; */
}

.control-item-button:focus {
    outline: none;
}

.control-item-disable {
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

.control-item-label {
    /* float: left; */
    /* margin: 0 0 0 1em; */
    min-width: 4em;
    text-align: center;
}

.control-item-blink {
    animation: blink 1s infinite;
    -webkit-animation: blink 1s infinite;
}

@keyframes blink {
    from {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
        -webkit-filter: blur(0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
        filter: blur(2px);
        -webkit-filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
        -webkit-filter: blur(0);
    }
}

@-webkit-keyframes blink {
    from {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
        -webkit-filter: blur(0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
        filter: blur(2px);
        -webkit-filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
        -webkit-filter: blur(0);
    }
}

.title-content {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 5em;
    padding: 0.5em 6vw 0 6vw;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.title-label {
    font-size: 1.5em;
    line-height: 1.25em;
    font-weight: bold;
}

.label-loading {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(50% - 1em);
    padding: 1em;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
}

.marker-letter {
    font-weight: bold;
    font-size: 1.25em;
    line-height: 0em;
    color: #828282;
    /* color: rgb(96, 192, 128); */
    transition: color 0.5s ease;
    padding-right: 0.25em;
}

.option-button {
    outline: none;
    line-height: 1.25em;
    background: rgba(128, 128, 128, 0.1);
    border: 2px solid rgba(0, 0, 0, 0);
    padding: 1em 1em;
    margin: 0.75em 0;
    border-radius: 0.5em;
    transition: background-color 0.5s ease;
    transition: color 0.5s ease;
    transition: border-color 0.5s ease;
    word-wrap: break-word;
    outline: none;
}

.option-button:focus {
    outline: none;
}

.option-content {
    margin: 1em 0 0 0;
}

.option-button-indra {
    color: #e0e0e0;
    outline: none;
    line-height: 1.25em;
    background: rgba(128, 128, 128, 0.1);
    border: 2px solid rgba(0, 0, 0, 0);
    padding: 1em 1em;
    margin: 0.75em 0;
    border-radius: 0.5em;
    transition: background-color 0.5s ease;
    transition: color 0.5s ease;
    transition: border-color 0.5s ease;
    word-wrap: break-word;
    outline: none;
}

.option-button-indra:hover {
    outline: none;
}

.btn-indra {
    border-radius: 2em;
    color: #fff;
    background: #464646;
    border: 2px solid #282828;
    box-shadow: inset 0 -1.5em rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.btn-indra-bak:hover {
    /* background: #696969; */
    color: #fff;
    box-shadow: inset 0 -1.5em rgba(0, 0, 0, 0.1), 0 0 1em rgba(0, 0, 0, 0.5);
}

.btn-indra-small {
    padding: 0 0.75em;
    height: 2em;
    border-radius: 1em;
    color: #fff;
    background: #464646;
    border: 2px solid #282828;
    box-shadow: inset 0 -0.75em rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.btn-indra-small-bak:hover {
    /* border: 2px solid #282828; */
    background: #696969;
    color: #fff;
    box-shadow: inset 0 -0.75em rgba(0, 0, 0, 0.1), 0 0 1em rgba(0, 0, 0, 0.5);
}

.marker-index {
    float: left;
    font-size: 2em;
    font-weight: bolder;
    transition: color 0.5s ease;
    color: #e0e0e0;
    /* color: rgb(96, 192, 128); */
    /* color: #aaa; */
    margin: 0;
    padding: 0 0 0 4.75vw;
}

.marker-type {
    position: relative;
    right: 4.5vw;
    font-size: 0.9em;
    text-align: center;
    float: right;
    border-radius: 0 0 0.5em 0.5em;
    /* background: #aaa; */
    /* background: lightgrey; */
    background: #282828;
    color: #828282;
    padding: 0.2em 1em 0.3em 1em;
    margin: 0 0 0 2.5vw;
    min-width: 7.5vw;
}

.content {
    position: fixed;
    left: 4vw;
    right: 4vw;
    top: 8.5em;
    bottom: 4.5em;
    margin: 0;
    padding: 0 5vw;
    overflow-y: auto;
}

.pannel {
    position: fixed;
    left: 4vw;
    right: 4vw;
    top: 5em;
    bottom: 4em;
    margin: 0;
    border-radius: 1em;
    /* background: #fff; */
    background: #464646;
    border: 2px solid #282828;
    color: #e0e0e0;
    padding: 0em;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
    opacity: 1;
    transition: opacity 0.25s ease;
}

.basement {
    font-size: 1.05em;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* background-color: rgb(96, 192, 128); */
    background-color: #646464;
    transition: background-color 1s ease;
}

.correct-color {
    /* color: rgb(96, 192, 128); */
    /* color: #00ec00; */
    color: #fff;
}

.correct-background {
    /* background-color: rgb(96, 192, 128); */
    background-color: #646464
}

.incorrect-color {
    /* color: rgb(192, 96, 64); */
    /* color: #e80f0f; */
    color: #fff;
}

.incorrect-background {
    /* background-color: rgb(192, 96, 64); */
    background-color: #828282;
}

.incorrect-option {
    /* border: 2px solid rgba(192, 96, 64, 0.6);
  color: rgb(192, 96, 64);
  background-color: rgba(192, 96, 64, 0.2); */
    border: 2px solid #fff;
    color: #fff;
    background-color: #e80f0f;
}

.correct-option {
    /* border: 2px solid rgba(96, 192, 128, 0.6);
  color: rgb(96, 192, 128);
  background-color: rgba(96, 192, 128, 0.2); */
    border: 2px solid #fff;
    color: #fff;
    background-color: #00ec00;
}

.btn-indra-yellow {
    color: #ffff00
}

.btn-indra-green {
    color: #00ec00
}

.btn-indra-red {
    color: #e80f0f
}

.btn-indra-grey {
    color: #828282
}

.fade-out {
    opacity: 0.15;
    filter: blur(3px);
    transition: filter-blur 0.3s ease;
    transition: opacity 0.3s ease;
}